<template>
    <div style="background-color: rgba(0, 0, 0, 0.05)">
        <!--顶部-->
        <div style="margin-top: 25px;">
            <el-row :gutter="80">
                <el-col :span="6">
                    <el-card shadow="always" class="box-card">
                        <div style="float: left">
                            <img src="../../assets/img/register.png" style="width: 40px;height: 40px;" alt="">
                        </div>

                        <div class="card-description">
                        <span class="register-text">
                            注册数
                        </span>

                        </div>
                        <div style="float: right;margin-top: 35px">
                            <count-to :start-val="0" :end-val="545400" :duration="2600"
                                      style="font-weight: bold;font-size: 20px;color: rgba(0, 0, 0, 0.6);"/>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="always" class="box-card">
                        <div style="float: left">
                            <img src="../../assets/img/visitor.png" style="width: 40px;height: 40px;font-weight: bold"
                                 alt="">
                        </div>

                        <div class="card-description">
                        <span class="register-text">
                            访问数
                        </span>
                        </div>
                        <div style="float: right;margin-top: 35px">
                            <count-to :start-val="0" :end-val="412400" :duration="2600"
                                      style="font-weight: bold;font-size: 20px;color: rgba(0, 0, 0, 0.6);"/>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="always" class="box-card">
                        <div style="float: left">
                            <img src="../../assets/img/order_num.png" style="width: 40px;height: 40px;" alt="">
                        </div>

                        <div class="card-description">
                        <span class="register-text">
                            订单数
                        </span>
                        </div>
                        <div style="float: right;margin-top: 35px">
                            <count-to :start-val="0" :end-val="125652" :duration="2600"
                                      style="font-weight: bold;font-size: 20px;color: rgba(0, 0, 0, 0.6);"/>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card shadow="always" class="box-card">
                        <div style="float: left">
                            <img src="../../assets/img/money.png" style="width: 40px;height: 40px;font-weight: bold"
                                 alt="">
                        </div>

                        <div class="card-description">
                        <span class="register-text-money">
                            今日收益
                        </span>
                        </div>
                        <div style="float: right;margin-top: 35px">
                            <count-to :start-val="0" :end-val="454215" :duration="2600"
                                      style="font-weight: bold;font-size: 20px;color: rgba(0, 0, 0, 0.6);"/>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!--柱状图-->
        <div id="main" style="width:1655px;height:500px;margin-left:5px;margin-top: 30px;background-color: white"
             ref="chart"></div>
        <div style="width: 400px;height: 400px;margin-top: 20px;float: left" id="pieChart">

        </div>
        <div style="width: 400px;height: 400px;margin-top: 20px;float: right;" id="3dChart">

        </div>

        <div style="width: 400px;height: 400px;margin-top: 20px;float: right;margin-right: 180px" id="bottomChart">

        </div>


    </div>

</template>

<script>
    import countTo from 'vue-count-to';

    let echarts = require('echarts/lib/echarts');
    // 引入饼状图组件
    require('echarts/lib/chart/pie');

    export default {
        name: "home",
        components: {countTo},
        data() {
            return {
                // 7天日期
                dates: ['2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18', '2021-02-18'],
                // 登录数
                loginNum: [12, 123, 423, 2345, 2134, 123, 423],
                // 注册数
                registerNum: [945, 789, 34, 216, 35, 52, 154],
                // 认证数
                authNum: [36, 234, 675, 26, 346, 643, 64],
            }
        },
        methods: {
            initCharts() {
                var chart = document.getElementById('main');
                let myChart = echarts.init(chart);
                // 绘制图表
                myChart.setOption(
                    {
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['登录', '注册', '认证'],
                            left: '10',
                        },
                        grid: {
                            left: '2%',
                            right: '6%',
                            bottom: '5%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '登录',
                                type: 'line',
                                data: this.loginNum,
                                color: 'rgb(98, 108, 145)',
                                smooth: true,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '注册',
                                type: 'line',
                                data: this.registerNum,
                                color: "rgb(107, 230, 193)",
                                smooth: true,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },
                            {
                                name: '认证',
                                type: 'line',
                                data: this.authNum,
                                color: "rgb(63, 177, 227)",
                                smooth: true,
                                lineStyle: {
                                    normal: {
                                        width: 3
                                    }
                                }
                            },

                        ]
                    }
                );

            },
            initPieCharts() {
                let chartDom = document.getElementById('pieChart');
                let myChart = echarts.init(chartDom);
                let option;

                option = {
                    backgroundColor: '#2c343c',

                    title: {
                        text: 'Customized Pie',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item'
                    },

                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 335, name: '直接访问'},
                                {value: 310, name: '邮件营销'},
                                {value: 274, name: '联盟广告'},
                                {value: 235, name: '视频广告'},
                                {value: 400, name: '搜索引擎'}
                            ].sort(function (a, b) {
                                return a.value - b.value;
                            }),
                            roseType: 'radius',
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            initBottomCharts() {
                var chartDom = document.getElementById('bottomChart');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '浏览器占比变化',
                        subtext: '纯属虚构',
                        top: 10,
                        left: 10
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        type: 'scroll',
                        bottom: 10,
                        data: (function () {
                            var list = [];
                            for (var i = 1; i <= 28; i++) {
                                list.push(i + 2000 + '');
                            }
                            return list;
                        })()
                    },
                    visualMap: {
                        top: 'middle',
                        right: 10,
                        color: ['red', 'yellow'],
                        calculable: true
                    },
                    radar: {
                        indicator: [
                            {text: 'IE8-', max: 400},
                            {text: 'IE9+', max: 400},
                            {text: 'Safari', max: 400},
                            {text: 'Firefox', max: 400},
                            {text: 'Chrome', max: 400}
                        ]
                    },
                    series: (function () {
                        var series = [];
                        for (var i = 1; i <= 28; i++) {
                            series.push({
                                name: '浏览器（数据纯属虚构）',
                                type: 'radar',
                                symbol: 'none',
                                lineStyle: {
                                    width: 1
                                },
                                emphasis: {
                                    areaStyle: {
                                        color: 'rgba(0,250,0,0.3)'
                                    }
                                },
                                data: [{
                                    value: [
                                        (40 - i) * 10,
                                        (38 - i) * 4 + 60,
                                        i * 5 + 10,
                                        i * 9,
                                        i * i / 2
                                    ],
                                    name: i + 2000 + ''
                                }]
                            });
                        }
                        return series;
                    })()
                };

                option && myChart.setOption(option);
            },
            init3DChart() {
                var chartDom = document.getElementById('3dChart');
                var myChart = echarts.init(chartDom);
                var option;

                var data = [];
// Parametric curve
                for (var t = 0; t < 25; t += 0.001) {
                    var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
                    var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
                    var z = t + 2.0 * Math.sin(75 * t);
                    data.push([x, y, z]);
                }
                console.log(data.length);

                option = {
                    tooltip: {},
                    backgroundColor: '#fff',
                    visualMap: {
                        show: false,
                        dimension: 2,
                        min: 0,
                        max: 30,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        }
                    },
                    xAxis3D: {
                        type: 'value'
                    },
                    yAxis3D: {
                        type: 'value'
                    },
                    zAxis3D: {
                        type: 'value'
                    },
                    grid3D: {
                        viewControl: {
                            projection: 'orthographic'
                        }
                    },
                    series: [{
                        type: 'line3D',
                        data: data,
                        lineStyle: {
                            width: 4
                        }
                    }]
                };

                option && myChart.setOption(option);
            },


        },
        mounted() {
            //柱状图
            this.initCharts();
            //饼状图
            this.initPieCharts();
            //底部浏览器占比
            this.initBottomCharts();
            //3d
            this.init3DChart();


        }

    }
</script>

<style lang="less">
    .box-card {
        height: 110px;
        position: relative;
    }

    .box-card:hover {
        box-shadow: 5px 5px 5px #888888;
        transform: scale(1.05);
        transition: 0.5s;

    }

    .register-text {
        float: right;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        padding-left: 210px;
        position: absolute;
    }

    .register-text-money {
        float: right;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        padding-left: 200px;
        position: absolute;
    }


</style>
